<template>
  <view :style="{ '--header-bg-color': headerBackgroundColor, '--text-color': headerColor }">
    <t-table
      :columns="columns"
      :data="data"
      :pagination="pagination"
      :hover="true"
      :stripe="stripe"
      :row-key="rowKey"
      :selected-row-keys="selectedRowKeys"
      :foot-data="footData"
      :bordered="bordered"
      @select-change="rehandleSelectChange"
      @change="rehandleChange"
    >
      <template v-for="(_, slotName) in $slots" #[slotName]="scope">
        <slot :name="slotName" v-bind="scope" />
      </template>
    </t-table>
  </view>
</template>
<script setup lang="ts">
import type { PropType } from 'vue';
import { ref } from 'vue';

interface TableColumn {
  title?: string;
  colKey: string;
  align?: 'left' | 'right' | 'center';
  width?: string | number;
  fixed?: 'left' | 'right';
  type?: 'single' | 'multiple';
}

const props = defineProps({
  footData: {
    type: Array as PropType<any[]>,
    default: () => [],
  },
  columns: {
    type: Array as PropType<TableColumn[]>,
    default: () => [],
  },
  data: {
    type: Array as PropType<any[]>,
    default: () => [],
  },
  pagination: {
    type: Object as PropType<{
      defaultCurrent: number;
      defaultPageSize: number;
      total: number;
    }>,
    default: () => null,
  },
  stripe: {
    // 斑马纹
    type: Boolean,
    default: false,
  },
  bordered: {
    // 边框
    type: Boolean,
    default: false,
  },
  rowKey: {
    // 标识
    type: String,
    default: 'index',
  },
  selectedRowKeys: {
    // 多选的数据
    type: Array as PropType<Array<string | number>>,
    default: () => [],
  },
  headerBackgroundColor: {
    // 表头背景色
    type: String,
    default: '#fff',
  },
  headerColor: {
    // 表头字体颜色
    type: String,
  },
});

const emit = defineEmits(['update:selectedRowKeys', 'update:pagination', 'unGetList']);
const rehandleSelectChange = (value: any) => {
  emit('update:selectedRowKeys', value);
};

const rehandleChange = (value: any) => {
  const obj = {
    total: props.pagination.total,
    defaultPageSize: value.pagination.pageSize,
    defaultCurrent: value.pagination.current,
  };
  emit('update:pagination', obj);
  emit('unGetList');
};
</script>

<style lang="less">
/* 修改表头背景色和文字颜色 */
.t-table th {
  background-color: var(--header-bg-color) !important;
  color: var(--text-color) !important;
}

.t-table__body tr:nth-child(2n) {
  background-color: var(--header-bg-color) !important;
}
</style>
